<template>
  <view class="product-container shadow overflow-hidden mt-2 relative"
    @click="navigateTo('/pages/group/product?scene=' + props.product.id)">
    <!-- Header -->
    <view class="header" @click.stop="toStore(props.product.storeId)">
      <view class="header-left">
        <image class="logo" :src="props.product.storeImage" mode="aspectFit"></image>
        <view class="header-text line-clamp-1">
          {{ props.product.storeName }}
        </view>
      </view>
      <!-- <view class="header-right">
        <wd-button type="icon" icon="share" @click.stop="handleShare"></wd-button>
      </view> -->
    </view>

    <!-- Product Title -->
    <view class="product-title-container">
      <view class="product-title line-clamp-1 w-500rpx">
        {{ props.product.name }}
      </view>
      <view class="product-subtitle">
        <text>{{ props.product.keyword }}</text>
        <text class="publish-time" v-if="props.product.createTime">
          {{ formatTime(props.product.createTime) }}发布
        </text>
      </view>
    </view>

    <!-- Price -->
    <view class="price-container">
      <text class="price-symbol">¥</text>
      <text class="price-value">{{ props.product.spellPrice }}</text>
    </view>

    <!-- Product Images -->
    <view class="product-images">
      <view class="image-item video-container" v-for="(image, index) in imageList" :key="index">
        <image :src="image" mode="aspectFill"></image>
      </view>
    </view>

    <!-- Bottom Stats and Actions -->
    <view class="bottom-container">
      <view class="stats">
        <view class="user-avatars">
          <image class="avatar" src="http://llcdn.jxsr.com/icon-test_1.png" mode="aspectFill" />
          <image class="avatar" src="http://llcdn.jxsr.com/icon-test_2.png" mode="aspectFill" />
          <image class="avatar" src="http://llcdn.jxsr.com/icon-test_3.png" mode="aspectFill" />
        </view>
        <view class="stats-text">
          <text class="stats-number">{{ props.product.heelSpellNumber || 0 }}</text>
          <text>人跟团</text>
          <text class="stats-number stats-divider">{{ props.product.browse || 0 }}</text>
          <text>人看过</text>
        </view>
      </view>
      <view class="action-buttons">
        <view class="join-btn" @click.stop="handleJoin">
          <i class="iconfont icon-hongbao mr-1"></i>
          跟团
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { formatTime } from '@/utils/index'
import { useOrderStore } from '@/store/order'
import { useUserStore } from '@/store/user'

const props = defineProps({
  product: {
    type: Object,
    default: null,
  },
})

const userStore = useUserStore()

const navigateTo = (url) => {
  uni.navigateTo({
    url,
  })
}

const toStore = (storeId) => {
  uni.navigateTo({
    url: `/pages/store/detail?id=${storeId}`,
  })
}

const handleShare = () => {
  // let path = `/pages/group/index`

  // if (userStore?.userInfo?.invitationCode) {
  //   path = `/pages/group/index?id=${props.product.id}&invitationCode=${userStore?.userInfo?.invitationCode}`
  // }

  // uni.showShareMenu({
  //   title: '邻里生活荟',
  //   content: props.product.name,
  //   imageUrl: props.product.mainImage,
  //   path,
  // })
}
const orderStore = useOrderStore()

const emits = defineEmits(['join'])

const handleJoin = () => {
  // 保存商品信息到本地存储
  orderStore.goodsInfo = props.product
  orderStore.num = 1

  // 跳转到拼团页面
  uni.navigateTo({
    url: '/pages/group/product?scene=' + props.product.id,
  })

  // emits('join')
}

const imageList = computed(() => {
  return props.product.sliderImage ? props.product.sliderImage.split(',') : []
})
</script>

<style scoped>
.product-container {
  background-color: #ffffff;
  border-radius: 30rpx;
}

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx 30rpx;
  border-bottom: 1px solid #f5f5f5;
}

.header-left {
  display: flex;
  align-items: center;
}

.logo {
  width: 80rpx;
  height: 80rpx;
  margin-right: 20rpx;
}

.header-text {
  display: flex;
  flex-direction: column;
  width: 600rpx;
  height: 46rpx;
  overflow: hidden;
  text-overflow: ellipsis;
}

.header-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.header-subtitle {
  margin-top: 6rpx;
  font-size: 24rpx;
  color: #ff6b35;
}

.header-right {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.more-btn {
  margin-right: 20rpx;
  font-size: 40rpx;
  color: #999;
}

.product-title-container {
  padding: 20rpx 30rpx;
}

.product-title {
  margin-bottom: 10rpx;
  font-size: 36rpx;
  font-weight: bold;
  line-height: 1.4;
}

.title-prefix {
  font-weight: bold;
}

.emoji {
  display: inline-block;
  vertical-align: middle;
}

.discount-tag {
  display: inline-block;
  width: 40rpx;
  height: 40rpx;
  margin: 0 10rpx;
  font-size: 28rpx;
  line-height: 40rpx;
  color: white;
  text-align: center;
  background-color: #ff6b35;
  border-radius: 50%;
}

.product-subtitle {
  display: flex;
  justify-content: space-between;
  font-size: 28rpx;
  color: #333;
}

.publish-time {
  font-size: 24rpx;
  color: #999;
}

.price-container {
  position: absolute;
  top: 100rpx;
  right: 10rpx;
  padding: 10rpx 30rpx 30rpx;
}

.price-symbol {
  font-size: 36rpx;
  color: #ff6b35;
}

.price-value {
  font-size: 60rpx;
  font-weight: bold;
  color: #ff6b35;
}

.product-images {
  display: flex;
  gap: 10rpx;
  padding: 0 30rpx;
}

.image-item {
  position: relative;
  flex: 1;
  height: 250rpx;
  overflow: hidden;
  border-radius: 12rpx;
}

.image-item image {
  width: 100%;
  height: 100%;
}

.video-container {
  position: relative;
}

.play-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80rpx;
  height: 80rpx;
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.play-triangle {
  width: 0;
  height: 0;
  margin-left: 6rpx;
  border-color: transparent transparent transparent #ffffff;
  border-style: solid;
  border-width: 15rpx 0 15rpx 30rpx;
}

.bottom-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx;
}

.stats {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  width: 400rpx;
  padding: 10rpx;
  background-image: linear-gradient(120deg, #d4fc79 0%, #96e6a1 100%);
  border-radius: 41rpx;
}

.user-avatars {
  display: flex;
  margin-right: 35rpx;
}

.avatar {
  width: 40rpx;
  height: 40rpx;
  margin-right: -25rpx;
  border: 2rpx solid #ffffff;
  border-radius: 50%;
}

.stats-text {
  font-size: 24rpx;
  color: #666;
}

.stats-number {
  margin-right: 5rpx;
  font-weight: bold;
  color: #26c57d;
}

.stats-divider {
  margin-left: 20rpx;
}

.action-buttons {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: flex-end;
  width: 300rpx;
}

.share-btn,
.join-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 150rpx;

  height: 70rpx;
  font-size: 24rpx;
  line-height: 70rpx;
  text-align: center;
  border-radius: 35rpx;
}

.share-btn {
  color: #333;
  background-color: #ffffff;
  border: 1px solid #e0e0e0;
}

.wechat-icon {
  width: 30rpx;
  height: 30rpx;
  margin-right: 10rpx;
}

.join-btn {
  color: #ffffff;
  background-color: #26c57d;
  border: none;
}
</style>
